import { FC, useState } from 'react'
import { Button } from 'antd'
import CheckUploadFile from '@/components/global/CheckUploadFile'
import GlobalUpload from '@/components/global/GlobalUpload'

const UploadPage: FC = () => {
  const [ids] = useState('32')

  return (
    <>
      <h1>数组、一个</h1>
      <GlobalUpload
        ids={[32]}
        updateFile={(ids) => {
          console.log('[ ids ] >', ids)
        }}></GlobalUpload>

      <h1 className="mt-6">数组、多个</h1>
      <GlobalUpload
        ids={[458, 462]}
        multiple
        updateFile={(ids) => {
          console.log('[ ids ] >', ids)
        }}>
        <div slot="upload">
          <Button type="primary">上传</Button>
        </div>
        <div slot="accept">
          <p>支持扩展名：accept</p>
        </div>
      </GlobalUpload>

      <h1 className="mt-6">string、一个</h1>
      <GlobalUpload
        ids={'458'}
        updateFile={(ids) => {
          console.log('[ ids ] >', ids)
        }}></GlobalUpload>

      <h1 className="mt-6">string、多个</h1>
      <GlobalUpload
        ids={'458,462'}
        multiple
        updateFile={(ids) => {
          console.log('[ ids ] >', ids)
        }}></GlobalUpload>

      <h1 className="mt-6">number、一个</h1>
      <GlobalUpload
        ids={458}
        updateFile={(ids) => {
          console.log('[ ids ] >', ids)
        }}></GlobalUpload>

      <h1 className="mt-6">图片</h1>
      <GlobalUpload
        ids={'1616,1617'}
        multiple
        accept=".jpg,.jpeg,.png"
        listType="picture"
        updateFile={(ids) => {
          console.log('[ ids ] >', ids)
        }}></GlobalUpload>

      <h1 className="mt-6">预览</h1>
      <CheckUploadFile
        ids={ids}
        onDelete={(returnIds, deleteId) => {
          console.log('[ returnIds ] >', returnIds)
          console.log('[ deleteId ] >', deleteId)
        }}
      />
      <br />
      <br />
    </>
  )
}

export default UploadPage
